<template>
  <div class="wood">
    <Header />
    <div class="banner"></div>
    <div class="all-talk body-main">
      <div class="talk-info main-item-card">
        <div class="user-avater">
          <img :src="user_avater" alt="用户头像" />
        </div>
        <div class="user-detail">
          <textarea
            data-v-27effb30=""
            placeholder="有什么想说的吗..."
            auto-grow=""
            dense=""
            class="comment-textarea"
          ></textarea>
          <button @click="moodExpress()">提交</button>
        </div>
      </div>
      <div
        class="talk-item main-item-card"
        v-for="(item, index) in moods"
        :key="index"
      >
        <router-link :to="'/mood/' + item.mid">
          <div class="talk-info">
            <div class="user-avater">
              <img
                :src="item.uavater"
                alt="用户头像"
                @click="See(item.uaddress)"
              />
            </div>
            <div class="user-detail">
              <div class="user-nickname">
                <a :href="item.uaddress">{{ item.uname }}</a>
              </div>
              <div class="time">{{ item.mtime }}</div>
              <div class="talk-content">
                {{ item.mbody }}
              </div>
              <div class="talk-operation">
                <i class="iconfont icon-dianzan_kuai" title="点赞"></i
                >{{ item.mlike
                }}<i class="iconfont icon-xiaoxi-comment" title="评论"></i
                >{{ item.mcomment }}
              </div>
            </div>
          </div>
        </router-link>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script>
// @ is an alias to /src
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import $ from 'jquery'

export default {
  name: 'MoodView',
  components: {
    Header,
    Footer,
  },
  data() {
    return {
      moods: [],
      user_avater:
        'https://static.talkxj.com/photos/0bca52afdb2b9998132355d716390c9f.png',
    }
  },
  methods: {
    getMoods() {
      this.$api.mood
        .getMoods()
        .then((res) => {
          // console.log(res.data)
          this.moods = res.data.data
        })
        .catch((err) => {
          console.log(err)
          this.$message({
            message: '网页发生了错误！',
            type: 'error',
          })
        })
    },
    See(e) {
      window.open(e, '_blank')
    },
    setUser() {
      return this.$store.getters.user
    },
    moodExpress() {
      if (!this.user.id) {
        this.$message.error('请先登录再发表心情！')
        return
      }
      let text = $('textarea').val()
      if (!text) {
        this.$message.error('内容不能为空！请输入想发表的内容')
        return
      }
      let date = new Date()
      let time = `${date.getFullYear()}/${
        date.getMonth() + 1
      }/${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`
      const params = {
        parent_mid: 0,
        mtime: time,
        mbody: text,
        uid: this.user.id,
        mcomment: 0,
        mlike: 0,
      }
      console.log(params)

      this.$api.mood
        .expressMood(params)
        .then((res) => {
          if (res.data.code == 200) {
            this.$message.success('发表心情成功！')
            setTimeout(() => {
              location.reload()
            }, 500)
          } else {
            this.$message.err('???怎么不能发表啊')
          }
        })
        .catch((err) => {
          console.log(err)
          this.$message({
            message: '???网页怎么出问题了',
            type: 'error',
          })
        })
    },
  },
  created() {
    this.getMoods()
    this.user = this.setUser()
    if (this.user.avater) this.user_avater = this.user.avater
  },
}
</script>

<style lang="scss">
.wood {
  background-color: var(--main-bg);

  .banner {
    background: url('http://47.113.189.57:5000/mood/2.jpg') center no-repeat;
    background-size: cover;
    min-height: 400px;
  }

  .all-talk {
    > .talk-info {
      padding: 16px 20px;
      > .user-detail {
        align-items: flex-end;
      }
    }
    .talk-item {
      padding: 16px 20px;

      a {
        color: var(--main-color);
      }
    }
  }
}
.talk-info {
  > .user-detail {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    > textarea {
      width: 100%;
      font-size: 0.875rem;
      color: var(--main-color);
      outline: none;
      padding: 10px 5px;
      min-height: 122px;
      border-radius: 4px;
      border-style: none;
      resize: none;
      background: url(https://static.talkxj.com/config/commentBack.webp) 100%
        100% no-repeat;
      background-color: #fff;
    }
    > button {
      margin-top: 1em;
      // border: 1px solid #ededed;
      border-radius: 4px;
      text-align: center;
      padding: 6px 16px;
      font-size: 14px;
      transition: background-color 0.3s;
      background-color: #49b1f5;
      color: white;
      &:hover {
        background-color: orange;
      }
    }
  }
}
</style>
